<template>
    <div>
        <div class="x3">
            <el-container style="height: 100%; margin: 0;padding: 0;">
                <el-header class="tou1">

                </el-header>
                <el-main class="shen1">
                    <div style="display: flex;">
                        <div>

                        </div>
                        <div style="display: flex; justify-content: flex-end;margin-left:20px">
                            <el-input v-model="params.studentName" placeholder="请输入内容"></el-input>
                            <el-button type="primary" icon="el-icon-search" @click="sous">搜索</el-button>
                        </div>
                    </div>
                    <div>
                        <template>
                            <el-table :data="shuju" style="width: 100% ,">

                                <el-table-column prop="courseName" label="课程名" width="180">
                                </el-table-column>
                                <el-table-column prop="studentName" label="学生名">
                                </el-table-column>
                                <el-table-column prop="examScore" label="笔试分" width="180">
                                </el-table-column>
                                <el-table-column prop="studentCourseId" label="选课id">
                                </el-table-column>
                                <el-table-column prop="dailyScore" label="日常分" width="180">
                                </el-table-column>
                                <el-table-column prop="score" label="成绩">
                                </el-table-column>
                                <el-table-column prop="" label="操作">
                                    <template slot-scope="scope">

                                        <el-button type="text" size="small"
                                            @click="edit(scope.row.studentCourseId)">打分</el-button>
                                    </template>
                                </el-table-column>

                            </el-table>
                        </template>
                    </div>
                    <el-footer class="jiao1">
                        <div class="block">
                            <span class="demonstration"></span>
                            <el-pagination :current-page.sync="page" @current-change="currentChange"
                                layout="prev, pager, next" :total="yeshu">
                            </el-pagination>
                        </div>
                    </el-footer>
                </el-main>

            </el-container>
            <el-dialog title="打分" :visible.sync="dialogFormVisible">
                <el-form :model="form" label-width="100px" ref="form">






                    <el-form-item label="日常成绩" prop="dailyScore"
                        :rules="[{ required: true, message: '请输入成绩', trigger: 'blur' }]">
                        <el-input v-model="form.dailyScore" autocomplete="off"></el-input>
                    </el-form-item>


                    <el-form-item label="考试成绩" prop="examScore "
                        :rules="[{ required: true, message: '请输入成绩', trigger: 'blur' }]">
                        <el-input v-model="form.examScore" autocomplete="off"></el-input>
                    </el-form-item>


                    <el-form-item label="总成绩" prop="score "
                        :rules="[{ required: true, message: '请输入成绩', trigger: 'blur' }]">
                        <el-input v-model="form.score" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="录入的id" prop="studentCourseId"
                        :rules="[{ required: true, message: '请输入id', trigger: 'blur' }]">

                        <el-input v-model="form.studentCourseId" autocomplete="off" readonly></el-input>

                    </el-form-item>










                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="xktianjia">确 定</el-button>
                </div>
            </el-dialog>

        </div>
    </div>
</template>
<script>
import { cjlrb, cjlrxq, cjlrt, cjlrdf } from '@/api/index'
export default {
    data() {
        return {
            yeshu: 0,
            shuju: [],

            page: 0,

            params: {
                name: '',
                courseName: '',
                studentName: '',
                studentCourseId: 0,
                score: 0,
                examScore: 0,
                dailyScore: 0,
            },
            form: {
                dailyScore: 0,
                examScore: 0,
                score: 0,
                studentCourseId: 0,
                id: 0
            },
            dialogFormVisible: false

        }
    }, methods: {

        xktianjia() {

            this.$refs['form'].validate(f => {


                if (this.form.id != -1) {


                    cjlrdf(this.form).then(res => {

                        console.log(res);

                        if (res.code === 0) {

                            this.$message({

                                message: "修改成功",

                                type: "success"

                            });

                            this.cj();

                            this.dialogFormVisible = false;

                        }

                    })
                }



            });

        },

        edit(studentCourseId) {
            console.log(studentCourseId);
            cjlrxq(studentCourseId).then(res => {
                console.log(res);
                if (res.code === 0) {
                    console.log(res);

                    this.form = res.data;
                    this.dialogFormVisible = true
                }

            })
        },

        cj(params = this.params, page = 1) {
            console.log('Searching with params:', params);
            cjlrb(params, page).then(res => {

                console.log(res);

                if (res.code === 0) {

                    console.log(111);

                    this.shuju = res.data;

                    console.log(this.shuju);

                }

            });

        }, cj1(page = 1) {
            cjlrt(this.params, 1).then(res => {
                console.log(res);
                if (res.code === 0) {
                    console.log(111);

                    this.yeshu = res.data * 10;
                    console.log(res.data * 10);
                    // 初始化时加载第一页数据
                    this.cj(this.page);
                }
            })
        },

        currentChange(v) {
            console.log(v);
            this.page = v;
            this.cj(v); // 传递当前页码
        },
        sous() {
            console.log(this.params);
            console.log(1);

            this.page = 1;
            this.cj1(this.params)
            this.cj(this.params,this.page)
        },
    },
    mounted() {
        this.cj()

        this.cj1()
    }

}
</script>